import { useCallback, useEffect, useRef, useState } from "react";
import BasicContainer from "@/components/Antd";
import Search from "./Search";
import Table from "./Table";
import Drawer from "./Drawer";
import Modal from "./Modal";
import type { AccountTable } from "./Table/index.d";
import { useCallbackState } from "@/utils/hook";
import { getRandomElement, getRandomPhone } from "./utils";
import { addKey } from "@/utils/tools";
export let queryParams: any = {};

const Account: React.FC = () => {
  const [tableData, setTableData] = useState<AccountTable[]>([]);
  const DrawerRefs: any = useRef(null);
  const ModalRefs: any = useRef(null);
  const showDrawer = (type: any, record?: any) =>
    DrawerRefs.current.openDrawer(type, record);
  const showModal = (type: any, record: any) => {
    ModalRefs.current.openModal(type, record);
  };
  const handleAction = ({ type, record }: any) => {
    switch (type) {
      case "add":
        console.log("新增用户", DrawerRefs.current);
        showDrawer(type);
        break;
      case "update":
        console.log("更新用户");
        showDrawer(type, record);
        break;
      case "detail":
        console.log("用户详情");
        showDrawer(type, record);
        break;
      case "delete":
        console.log("删除用户");
        showModal(type, record);
        break;
      case "disabled":
        console.log("禁用用户");
        showModal(type, record);
        break;
    }
  };
  const fetchList = async () => {
    console.log("查询参数", queryParams);
    const newTableData: any[] = [];
    setTimeout(() => {
      for (let i = 0; i <= 50; i++) {
        newTableData.push({
          name: "张三" + i,
          username: getRandomElement(["张三", "李四", "王五", "赵六"]),
          roleName: getRandomElement([
            "管理员",
            "业务管理员",
            "技术管理员",
            "系统操作员",
          ]),
          department: getRandomElement([
            "财务部",
            "人力资源部",
            "计划营销部",
            "行政办公室",
            "生产技术部",
            "安全监察部",
            "总经理",
            "市场部",
            "后勤部",
            "运营部",
            "客服部",
            "人事部",
            "工会办公室",
            "保卫部",
            "采购部",
            "党群工作部",
            "客服组",
            "企管部",
            "质量管理部",
            "法务部",
          ]),
          status: getRandomElement(),
          createTime: Date.now(),
          updateTime: Date.now(),
          phone: getRandomPhone(),
        });
      }
      setTableData(addKey(newTableData));
      setTablePage({ ...tablePage, total: newTableData.length });
    }, 300);
  };

  const [tablePage, setTablePage] = useCallbackState({
    total: 0,
    current: 1,
    pageSize: 10,
  });
  const initPage = () => {
    queryParams.page = tablePage.current;
    queryParams.page_size = tablePage.pageSize;
    fetchList();
  };
  const refreshTable = useCallback((params: any) => {
    console.log("refreshTable", params);
    queryParams = { ...queryParams, ...params };
    setTablePage({ ...tablePage, current: 1 });
  }, []);
  useEffect(() => {
    initPage();
  }, [tablePage.current, tablePage.pageSize, queryParams]);

  return (
    <BasicContainer>
      <Search refreshTable={refreshTable} handleAction={handleAction} />
      <Table
        tableData={tableData}
        handleAction={handleAction}
        fetchList={fetchList}
        tablePage={tablePage}
        setTablePage={setTablePage}
      />
      <Drawer
        ref={DrawerRefs}
        fetchList={fetchList}
        refreshTable={refreshTable}
      />
      <Modal ref={ModalRefs} />
    </BasicContainer>
  );
};
export default Account;
